<template>
	<view class="page">
		<view class="price-count-down">
			<view class="price">
				<text class="min">￥</text>
				<text class="max">{{totalPrice}}</text>
				<text class="min">.00</text>
			</view>
			<view class="count-down">
				<view class="title">支付剩余时间</view>
				<view class="count">
					<text>{{msg}}</text>
				</view>
			</view>
		</view>
		<!-- 支付方式列表 -->
		<view class="pay-way">
			<view class="pay-list">
				<view class="list" v-for="(item,index) in PayList" @click="onPayWay(item,index)" :key="index">
					<view class="pay-type">
						<image :src="item.icon" mode=""></image>
						<text>{{item.name}}</text>
					</view>
					<view class="check">
						<text class="iconfont" :class="PayWay === index ? 'icon-checked action':'icon-check'"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="pay-submit">
			<view class="submit" @click="onSubmit">{{PayPirce}}￥{{totalPrice}}.00</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				PayList: [{
					icon: '/static/wx_pay.png',
					name: '微信支付',
				}, {
					icon: '/static/zfb_pay.png',
					name: '支付宝支付',
				}, {
					icon: '/static/ye_pay.png',
					name: '余额支付',
				}, ],
				totalPrice: 0.00, //金额
				PayWay: 0, //选中
				PayPirce: `微信支付`, //选中

				msg:'',//时间
				createtime: '', //下单时间
				overduetime: 30, //过期时间
			};
		},
		onLoad(option) {
			let data = option.id;
			this.orderid = data;
			this.getOrderDetail(data)
		},
		methods: {
			//根据订单号查询金额
			getOrderDetail(id) {
				// console.log(id)
				this.$api.order.getOrderDetail({
					data: id
				}).then((res) => {
					console.log(res)
					this.totalPrice = res.data[0].totalPrice
					this.createtime = res.data[0].createtime // 下单开始的时间
					this.countdown(); // 调用倒计时
				}).catch((err) => {
					console.log('request fail', err);
				})
			},
			/**
			 * 支付方式切换点击
			 */
			onPayWay(item, index) {
				this.PayWay = index;
				this.PayPirce = `${item.name}`
			},
			/**
			 * 倒计时
			 */
			countdown() {
				var _that = this
				var now = new Date(_that.createtime.replace(/-/g, '/')); //处理开始时间    这个方法兼容大多数浏览器以及h5手机端
				var minutes = Number(_that.overduetime); //处理输入的过期时间
				var end = now.setMinutes(now.getMinutes() + _that.overduetime); //计算最后时间
				var time_now = new Date().getTime(); //当前时间
				var msec = end - time_now; //最后时间-当前时间
				if (msec > 0) {
					let day = parseInt(msec / 1000 / 60 / 60 / 24)
					let hr = parseInt(msec / 1000 / 60 / 60 % 24)
					let min = parseInt(msec / 1000 / 60 % 60)
					let sec = parseInt(msec / 1000 % 60)
					day = day
					hr = hr > 9 ? hr : '0' + hr
					min = min > 9 ? min : '0' + min
					sec = sec > 9 ? sec : '0' + sec,
						this.msg = min + "分" + sec + "秒";
						console.log(min + "分" + sec + "秒")
				} else {
					console.log('进入')
					clearInterval(tim);
					if (_that.min == '0' && _that.sec == '0') {
						window.webkit.messageHandlers.backToOc.postMessage({});
						// 						this.$router.push('/Assets')
					}
					return;
				}
				const that = this
				var tim = setTimeout(function() {
					that.countdown(_that.createtime, _that.overduetime)
				}, 1000)

			},
			/**
			 * 支付点击
			 */
			onSubmit() {
				console.log('进入')
				// this.overduetime = 0;
			}
		},
		onUnload(){
			//停止执行
			this.overduetime = 0;
		}
	}
</script>

<style scoped lang="scss">
	@import 'CashierDesk.scss';
</style>
